<template>
    <el-container class="app-container">
        <!-- 侧边栏菜单 -->
        <el-aside :width="isCollapse ? '64px' : '240px'" class="sidebar" :class="{ 'sidebar-collapsed': isCollapse }">
            <div class="sidebar-header">
                <el-button icon="Expand" class="collapse-btn" @click="toggleCollapse"
                    :title="isCollapse ? '展开菜单' : '收起菜单'" />
            </div>

            <el-menu :default-active="currentRoutePath" class="sidebar-menu" :collapse="isCollapse"
                :collapse-transition="false" router background-color="#0f1733" text-color="#C9CDD4"
                :unique-opened="true">
                <el-menu-item index="/">
                    <el-icon>
                        <Monitor />
                    </el-icon>
                    <template #title>大屏</template>
                </el-menu-item>
                <el-menu-item index="/dash">
                    <el-icon>
                        <Odometer />
                    </el-icon>
                    <template #title>辅助决策</template>
                </el-menu-item>
                <!-- <el-menu-item index="/Stia">
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    <template #title>科创助手</template>
                </el-menu-item> -->
                <el-menu-item index="/parkManage">
                    <el-icon>
                        <OfficeBuilding />
                    </el-icon>
                    <template #title>园区管理</template>
                </el-menu-item>
                <el-menu-item index="/companyManage">
                    <el-icon>
                        <School />
                    </el-icon>
                    <template #title>企业管理</template>
                </el-menu-item>
                <el-menu-item index="/EnterpriseFee"> <el-icon>
                        <Money />
                    </el-icon>
                    <template #title>缴费管理</template>
                </el-menu-item>
                <!-- <el-sub-menu index="dataCenter">
                    <template #title>
                        <el-icon>
                            <DataLine />
                        </el-icon>
                        <span>园区数据中心</span>
                    </template>
                    <div style="background-color: rgb(36 42 59);">
                        <el-menu-item index="/parkManage">园区管理</el-menu-item>
                        <el-menu-item index="/companyManage">企业管理</el-menu-item>
                        <el-menu-item index="/EnterpriseFee">缴费管理</el-menu-item>
                        <el-menu-item index="/Temp">人才库</el-menu-item>
                        <el-menu-item index="/Temp">产品库</el-menu-item>
                        <el-menu-item index="/Temp">服务机构</el-menu-item>
                        <el-menu-item index="/Temp">活动中心</el-menu-item>
                        <el-menu-item index="/Temp">需求库</el-menu-item>
                        <el-menu-item index="/Temp">知识产权库</el-menu-item>
                        <el-menu-item index="/Temp">园区数据统计</el-menu-item>
                    </div>

                </el-sub-menu>

                <el-sub-menu index="realtime">
                    <template #title>
                        <el-icon>
                            <Tickets />
                        </el-icon>
                        <span>咨询中心</span>
                    </template>
                    <div style="background-color: rgb(36 42 59);">
                        <el-menu-item index="/Temp">政治咨询</el-menu-item>
                        <el-menu-item index="/Temp">企业新闻</el-menu-item>
                        <el-menu-item index="/Temp">行业新闻</el-menu-item>
                        <el-menu-item index="/Temp">园区新闻</el-menu-item>
                    </div>
                </el-sub-menu>

                <el-sub-menu index="zngj">
                    <template #title>
                        <el-icon>
                            <Reading />
                        </el-icon>
                        <span>智能工具</span>
                    </template>
                    <div style="background-color: rgb(36 42 59);">
                        <el-menu-item index="/Temp">准高新企业</el-menu-item>
                        <el-menu-item index="/Temp">可能已融资企业</el-menu-item>
                        <el-menu-item index="/Temp">知识产权匹配</el-menu-item>
                        <el-menu-item index="/Temp">数据收集问卷</el-menu-item>
                    </div>
                </el-sub-menu> -->
                <el-sub-menu index="system" v-if="isAdmin">
                    <template #title>
                        <el-icon>
                            <Setting />
                        </el-icon>
                        <span>系统设置</span>
                    </template>
                    <el-menu-item index="/Temp">用户管理</el-menu-item>
                    <el-menu-item index="/Temp">角色权限</el-menu-item>
                    <el-menu-item index="/Temp">系统配置</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>

        <!-- 主内容区域 -->
        <el-container class="main-container">
            <el-main class="main-content">
                <!-- 路由视图，实际内容将通过路由加载 -->
                <router-view />
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import { ref, watchEffect, watch, inject, onMounted } from 'vue';
import { useRoute } from 'vue-router'
import auth from '@/components/utils/auth'

// 注入父组件提供的 setShowHeader 方法
// 第一个参数是父组件 provide 的 key，第二个参数是默认值（避免未提供时报错）
const setShowHeader = inject('setShowHeader', () => { });

setShowHeader(true);

//是否是超级管理员，超级管理员才有系统设置
const isAdmin = ref(false)

// 侧边栏折叠状态
const isCollapse = ref(false);

// 移动端菜单显示状态
const showMobileMenu = ref(true);

// 响应式判断
const isMobile = ref(false);
// 获取当前路由对象
const route = useRoute()
// 4. 动态绑定到 default-active：当前路由的完整路径
const currentRoutePath = ref('');

// 监听窗口大小变化，判断是否为移动设备
watchEffect(() => {
    const checkMobile = () => {
        isMobile.value = window.innerWidth < 768;
        // 在移动设备上默认折叠菜单
        if (isMobile.value) {
            isCollapse.value = true;
        } else {
            showMobileMenu.value = false;
        }
    };

    // 初始检查
    checkMobile();

    // 监听窗口大小变化
    window.addEventListener('resize', checkMobile);

    // 清理函数
    return () => {
        window.removeEventListener('resize', checkMobile);
    };
});

// 切换侧边栏折叠状态
const toggleCollapse = () => {
    if (!isMobile.value) {
        isCollapse.value = !isCollapse.value;
    } else {
        // 移动端点击折叠按钮切换菜单显示
        showMobileMenu.value = !showMobileMenu.value;
    }
};

// 监听路由变化，更新激活的菜单
watch(
    () => route.path,
    (newPath) => {
        currentRoutePath.value = newPath;
    }
);

// 初始化
onMounted(() => {
    // 首次加载时手动同步路由
    currentRoutePath.value = route.path;
    try {
        const userInfo = auth.getUserInfo()
        const roles = userInfo.roles
        // 判断是否是超级管理员
        isAdmin.value = roles.some(role => role.roleCode === 'admin');
    } catch (err) {

    }
});
</script>

<style scoped>
.app-container {
    height: calc(100%);
    overflow: hidden;
    background-color: #F5F7FA;
}

/* 侧边栏样式 */
.sidebar {
    background-color: #0F172A;
    transition: width 0.3s ease;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.sidebar .sidebar-header {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* 水平居中 */
    justify-content: center;
}

.sidebar .sidebar-header .logo {
    display: flex;
    align-items: center;
    flex: 1;
}

.sidebar .sidebar-header .logo .logo-icon {
    color: #42b983;
    font-size: 24px;
    margin-right: 8px;
}

.sidebar .sidebar-header .logo .logo-text {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
}

.sidebar .sidebar-header .collapsed-logo {
    color: #42b983;
    font-size: 24px;
    flex: 1;
    text-align: center;
}

.collapse-btn {
    width: 20px;
    height: 25px;
}

.sidebar .sidebar-header .collapse-btn {
    color: #a0aec0;
    background: transparent;
    transition: transform 0.3s ease;
}

.sidebar .sidebar-header .collapse-btn:hover {
    color: #ffffff;
    transform: rotate(90deg);
}

.sidebar .sidebar-menu {
    margin-top: 16px;
    height: calc(100% - 76px);
    overflow-y: auto;
}

.sidebar .sidebar-menu::-webkit-scrollbar {
    width: 4px;
}

.sidebar .sidebar-menu::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* 主内容区域样式 */
.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main-container .main-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #f7fafc;
}

.main-container .main-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.main-container .main-content::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 3px;
}

.main-container .main-content::-webkit-scrollbar-track {
    background-color: #edf2f7;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .main-content {
        padding: 16px !important;
    }

    .sidebar:not(.mobile-sidebar) {
        display: none;
    }

    .mobile-menu-btn {
        display: block !important;
    }
}
</style>